<template>
  <div class="ProjectsTemp">
    <div class="title">
      工程展示
      <span
        class="more"
        @click="toProjectPage()">
        更多>>
      </span>
    </div>
    <div class="content">
      <grid clickable :column-num="2">
        <grid-item v-for="item in imgsUrl" :key="item.id">
          <VanImage :src="oneImgSrc(item.imgPath)"/>
        </grid-item>
      </grid>
    </div>
  </div>
</template>

<script>
  import { Grid, GridItem, Image as VanImage } from 'vant'
export default {
  name: 'ProjectsTemp',
  components: {
    Grid,
    GridItem,
    VanImage
  },
  data () {
    return {

    }
  },
  props: {
    imgsUrl: {
      type: Array
    }
  },
  created () {},
  mounted () {},
  computed: {

  },
  methods: {
    oneImgSrc (oldVal) {
      return 'http://backmanage.yuxjt.com/' + oldVal
    },
    toProjectPage () {
      this.$router.push('/mobileProject')
    }
  }
}
</script>

<style scoped lang="scss">
  .ProjectsTemp {
    margin-top: 30px;
    .title {
      font-family: '微软雅黑', 'Microsoft YaHei';
      font-size: 20px;
      color: #8c939d;
      margin: 10px 15px;
      border-bottom: 1px solid #f08562;
      line-height: 40px;
      .more {
        float: right;
        color: #f08562;
        font-size: 12px;
      }
    }

    p{
      margin: 0;
    }

    .content {
      margin: 0 15px;
    }
  }
</style>
